<template>
  <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";
// import echarts from 'echarts'
import resize from "./mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    id: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "200px",
    },
    height: {
      type: String,
      default: "200px",
    },
    minchartData: {
      type: Object,
      default() {
        return {
          xData: [],
          female: [],
          male: [],
          average: [],
        };
      },
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    minchartData: {
      handler: function () {
        this.initChart();
      },
      deep: true,
    },
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id));

      // this.chart.setOption({
      //   backgroundColor: "#344b58",
      //   title: {
      //     // text: "尺码库销比",
      //     x: "20",
      //     top: "20",
      //     textStyle: {
      //       color: "#fff",
      //       fontSize: "22",
      //     },
      //     subtextStyle: {
      //       color: "#90979c",
      //       fontSize: "16",
      //     },
      //   },
      //   tooltip: {
      //     trigger: "axis",
      //     axisPointer: {
      //       textStyle: {
      //         color: "#fff",
      //       },
      //     },
      //   },
      //   grid: {
      //     left: "5%",
      //     right: "5%",
      //     borderWidth: 0,
      //     top: 150,
      //     // bottom: 95,
      //     textStyle: {
      //       color: "#fff",
      //     },
      //   },
      //   legend: {
      //     // x: "5%",
      //     top: "10%",
      //     textStyle: {
      //       color: "#90979c",
      //     },
      //     data: ["销售目标", "销售额", "达成率"],
      //   },
      //   calculable: true,
      //   xAxis: [
      //     {
      //       type: "category",
      //       axisLine: {
      //         lineStyle: {
      //           color: "#90979c",
      //         },
      //       },
      //       splitLine: {
      //         show: false,
      //       },
      //       axisTick: {
      //         show: false,
      //       },
      //       splitArea: {
      //         show: false,
      //       },
      //       axisLabel: {
      //         interval: 0,
      //       },
      //       data: this.minchartData.xData,
      //     },
      //   ],
      //   yAxis: [
      //     {
      //       type: "value",
      //       position: "left",
      //       splitLine: {
      //         show: false,
      //       },
      //       // axisLine: {
      //       //   lineStyle: {
      //       //     color: "#90979c",
      //       //   },
      //       // },
      //       axisTick: {
      //         show: false,
      //       },
      //       axisLabel: {
      //         interval: 0,
      //       },
      //       splitArea: {
      //         show: false,
      //       },
      //     },
      //     {
      //       type: "value",
      //       name: "达成率",
      //       position: "right",
      //       alignTicks: true,
      //       axisLine: {
      //         show: true,
      //         lineStyle: {
      //           color: "#90979c",
      //         },
      //       },
      //       axisLabel: {
      //         formatter: "{value} %",
      //       },
      //     },
      //   ],

      //   series: [
      //     {
      //       name: "销售目标",
      //       type: "bar",
      //       barWidth: 15,
      //       // yAxisIndex: 1,
      //       yAxisIndex: 0,
      //       color: "#a9a3e5",
      //       data: this.minchartData.female,
      //     },
      //     {
      //       name: "销售额",
      //       type: "bar",
      //       barWidth: 15,
      //       // yAxisIndex: 1,
      //       yAxisIndex: 0,

      //       color: "#2c8bc5",
      //       data: this.minchartData.male,
      //     },
      //     {
      //       name: "达成率",
      //       type: "line",
      //       color: "#eab263",
      //       // yAxisIndex: 0,
      //       yAxisIndex: 1,
      //       data: this.minchartData.average,
      //     },

      //   ],
      // });
      this.chart.setOption({
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(255,255,255,0.1)",
          axisPointer: {
            type: "shadow",
            label: {
              show: true,
              backgroundColor: "#7B7DDC",
            },
          },
        },
        legend: {
          data: ["成交金额", "消耗", "roi"],
          textStyle: {
            color: "#B4B4B4",
          },
          top: "0%",
        },
        grid: {
          x: "8%",
          width: "88%",
          y: "4%",
        },
        xAxis: {
          data: this.minchartData.xData,
          axisLine: {
            lineStyle: {
              color: "#B4B4B4",
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: "#B4B4B4",
              },
            },

            axisLabel: {
              formatter: "{value} ",
            },
          },
          {
            // name: "Temperature",
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: "#B4B4B4",
              },
            },
            axisLabel: {
              formatter: "{value} ",
            },
          },
        ],
        series: [
          {
            name: "roi",
            type: "line",
            smooth: true,
            showAllSymbol: true,
            symbol: "emptyCircle",
            symbolSize: 8,
            yAxisIndex: 1,
            // itemStyle: {
            //   normal: {
            //     color: "#F02FC2",
            //   },
            // },
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            data: this.minchartData.average,
          },
          {
            name: "成交金额",
            type: "bar",
            barWidth: 20,
            // itemStyle: {
            //   normal: {
            //     barBorderRadius: 5,
            //   },
            // },
            tooltip: {
              valueFormatter: function (value) {
                return value + " 万";
              },
            },
            data: this.minchartData.female,
          },
          {
            name: "消耗",
            type: "bar",
            // barGap: "-100%",
            barWidth: 20,
            tooltip: {
              valueFormatter: function (value) {
                return value + " 万";
              },
            },
            // itemStyle: {
            //   normal: {
            //     barBorderRadius: 5,
            //   },
            // },
            z: -12,
            data: this.minchartData.male,
          },
        ],
      });
      this.chart.on("click", this.handleClick);
    },
    handleClick(params) {
      // this.$emit("SetLineChartData", params.dataIndex);
    },
  },
};
</script>
